<script>
export default {
    name:'RsTabBarItem',
    props:{
        canClose:{
            type:Boolean,
            default:true
        },
        data:{
            type:Object,
            default:function(){return {}}
        },
        icon:{
            type:String,
            default:''
        }
    },
    computed:{
        selected(){

            return this.$parent.value === this.$vnode.key;
        }
    },
    methods:{
        onClick(ev){
            this.$parent.processItemClick(ev,this);
        },
        onClose(ev){

            this.$parent.processItemClose(ev,this);
            ev.stopPropagation();
        },
        onContextMenu(ev){
            this.$parent.processItemContextMenu(ev,this);
            ev.stopPropagation();
        }
    },
    render(){

        const close = this.canClose?<i class="rs-icon-close-bold close" onClick={(ev)=>{this.onClose(ev)}}></i>:'';
        const icon = this.icon !== '' ?<i class={[this.icon,"icon"]}></i>:''
        return (
            <div class={["tab-item",{"select":this.selected,"icon":this.icon !== ''}]}
                onClick={(ev)=>{this.onClick(ev)}} 
                on-contextmenu={(ev)=>{this.onContextMenu(ev)}}
            > 
                <span class="text">{icon}{this.$slots.default}</span>
                {close}
            </div>
        )
    }
}
</script>